<!-- 级联选择器Demo -->
<!-- <template>
    <div class="m-4">
      <p>商品分类展示</p>
      <el-cascader v-model="value" :options="options" :props="props" @change="handleChange" />
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref,onMounted } from 'vue'
  import axios from 'axios'
  
  const value = ref([])
  
  const props = {
    expandTrigger: 'hover' as const,
  }
  
  const handleChange = (value:any) => {
    console.log(value)
  }
  
  const options = ref([])

  onMounted(()=>{
    LoadData();
  })

  const LoadData=()=>{
    axios.get("https://localhost:44376/api/Goods/GetCascaderItemInfo?Pid=0")
    .then(res=>{
        console.log(res.data);
        options.value=res.data.Data
    })
    .catch(error=>{
        console.log(error);
    })

  }
  </script> -->
  


  <!-- 上传Demo -->
  <!-- <template>
    <el-upload class="avatar-uploader" action="https://localhost:44376/api/Files/FileUpLoads"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">

      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import { Plus } from '@element-plus/icons-vue'
  
  import type { UploadProps } from 'element-plus'
  
  const imageUrl = ref('')


  //完成文件上传方法
  const handleAvatarSuccess=(perObj:any)=>{
    console.log(perObj.Comm_Path);
  }
  
  //文件上传前的验证
  const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
      ElMessage.error('上传文件的类型必须为.JPG')
      return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
      ElMessage.error('文件大小不得超过2MB!')
      return false
    }
    return true
  }
  </script>
  
  <style scoped>
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
  
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  </style> -->
  

<!-- 富文本编辑器 -->
<!-- <template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden;"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef } from 'vue'
import { Editor, Toolbar } from '../../node_modules/@wangeditor/editor-for-vue'

const mode=ref();

   // 编辑器实例，必须用 shallowRef
   const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')


const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor:any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
</script> -->
 

<!-- 分页基础控件 -->
<!-- <template>
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[1, 2, 3, 4]"
      :size="size"
      :disabled="false"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :total="10"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'

const currentPage4 = ref(4)
const pageSize4 = ref(10)
const size = ref<ComponentSize>('default')
// const background = ref(false)
// const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style> -->


<!-- 侦听器 -->
 <template>
    <span>
      <input type="button" @click="x.age++" value="增加" />
    </span>
 </template>
 
 <script setup lang="ts">
 import {ref,watch} from 'vue'
  const x = ref({age:0})

  // 单个 ref   声明侦听器关键字：Watch    1.代表了侦听的数据对象  2.代表数据的变化
  watch(x, (newX) => {
    console.log(`x is ${newX.age}`)
  },{deep:true})
</script>